import React from "react";
import "./cataglog.css"
import { NavigationContext } from "../../common/context";

interface GoodItem {
  id: number;
  name: string;
  path: string;
}

interface HomeState {
  good: GoodItem[]
}

type HomeProps = Record<string, never>

class Home extends React.Component<HomeProps, HomeState> {
  static contextType = NavigationContext;
  declare context: React.ContextType<typeof NavigationContext>

  constructor(props: HomeProps) {
    super(props)
    this.state = {
      good: []
    }
  }

  componentDidMount (): void {
    setTimeout(() => {
      const newGoodData: GoodItem[] = [
        {
          id: 1,
          name: "路由的配置",
          path: "/about"
        },
        {
          id: 2,
          name: "组件的熟悉",
          path: "about"
        },
        {
          id: 3,
          name: "组件的通信",
          path: "/parent"
        },
        {
          id: 4,
          name: "联系页",
          path: "/contact"
        },
        {
          id: 5,
          name: "受控组件",
          path: "/control"
        },
        {
          id: 6,
          name: "非受控组件",
          path: "/uncontrol"
        },
        {
          id: 7,
          name: "Memo",
          path: "/memo"
        }
      ]
      this.setState({ good: newGoodData })
    }, 1000)
  }

  private handleClick = (item: GoodItem) => {
    if (this.context) {
      this.context(item.path)
    }
  }

  render (): React.ReactElement {
    return (
      <div>
        {
          this.state.good.map(item => {
            return (
              <div key={item.id} onClick={() => this.handleClick(item)}>
                <p>{ item.name } { item.path }</p>
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default Home
